<template>
  <div class="home">
    <el-form :inline="true" class="demo-form-inline">
          <el-form-item :label="$t('message.xymc')+':'">
            <el-input
              v-model="$store.state.contractParams.contractTitleCn"
              clearable
              :placeholder="$t('message.p-xymc')"
              @input="changeStoreParams($event, 'contractTitleCn')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.cglx')+':'">
            <el-select
              v-model="$store.state.contractParams.contractType"
              clearable
              :placeholder="$t('message.qxzcglx')"
              @change="changeStoreParams($event, 'contractType')"
            >
              <el-option
                v-for="item in $store.state.contractTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.xyh')+':'">
            <el-input
              v-model="$store.state.contractParams.contractId"
              clearable
              :placeholder="$t('message.p-xyh')"
              @input="changeStoreParams($event, 'contractId')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.cgs')+':'">
            <el-input
              v-model="$store.state.contractParams.purchaser"
              clearable
              :placeholder="$t('message.p-cgs')"
              @input="changeStoreParams($event, 'purchaser')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.gys')+':'">
            <el-input
              v-model="$store.state.contractParams.supplier"
              clearable
              :placeholder="$t('message.p-gys')"
              @input="changeStoreParams($event, 'supplier')"
            ></el-input>
          </el-form-item>
        <!--
                <el-col :span="3">
                    <el-form-item label="行业类别:">
                        <el-select v-model="$store.state.contractParams.industryType" clearable placeholder="请选择行业类别" @change="changeStoreParams($event, 'industryType')">
                            <el-option v-for="item in $store.state.industryList" :key="item.dictCode" :label="item.dictName" :value="item.dictCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
        -->
          <el-form-item :label="$t('message.htqx')+':'" class="hack-width-auto">
            <el-date-picker
              v-model="$store.state.contractParams.executionDate"
              type="daterange"
              :range-separator="$t('message.to')"
              :start-placeholder="$t('message.p-starM')"
              :end-placeholder="$t('message.p-endM')"
              value-format="yyyy-MM-dd"
              @change="changeStoreParams($event, 'executionDate')"
            ></el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('message.zt')+':'" class="lang-item">
            <el-select
              v-model="$store.state.contractParams.contractStatus"
              class="select-style"
              style="margin-right: 12px;"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="changeStat"
            >
              <el-option
                v-for="item in $store.state.statType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-model="$store.state.contractParams.approvalStatus"
              class="select-style"
              style="margin-right: 12px;"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="changeStoreParams($event, 'approvalStatus')"
            >
              <el-option
                v-for="item in $store.state.statTypeDetail[$store.state.contractParams.contractStatus]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.je')+':'" class="lang-item">
            <el-input
              v-model.number="$store.state.contractParams.startUsd"
              @input="changeStoreParams($event, 'startUsd')"
              clearable
              style="width: 120px;"
            ></el-input>
            {{$t('message.to')}}
            <el-input
              v-model="$store.state.contractParams.endUsd"
              @input="changeStoreParams($event, 'endUsd')"
              style="width: 120px;"
              clearable
            ></el-input>
            {{$t('message.wmy')}}
          </el-form-item>
          <el-form-item :label="$t('message.hyly')+':'" class="lang-item">
            <el-select
              v-model="$store.state.contractParams.serviceType1"
              :title="$store.state.contractParams.serviceType1"
              class="select-style"
              style="margin-right: 12px;"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="changeService({
                            value: $event,
                            level: 'serviceType1',
                        })"
            >
              <el-option
                v-for="item in $store.state.releaseArea1"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              ></el-option>
            </el-select>
            <el-select
              v-model="$store.state.contractParams.serviceType2"
              class="select-style"
              style="margin-right: 12px;"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="changeService({
                            value: $event,
                            level: 'serviceType2',
                        })"
            >
              <el-option
                v-for="item in $store.state.contractPage.serviceList2"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              ></el-option>
            </el-select>
            <el-select
              v-model="$store.state.contractParams.serviceType3"
              class="select-style"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="changeService({
                            value: $event,
                            level: 'serviceType3',
                        })"
            >
              <el-option
                v-for="item in $store.state.contractPage.serviceList3"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.htzl')+':'" class="lang-item">
            <el-select
              v-model="$store.state.contractParams.border"
              @change="changeStoreParams({
                            border: $event,
                            impExpType: '',
                            province: '',
                            cityCode: '',
                            regionCode: '',
                        })"
              class="select-style"
              style="margin-right: 10px;"
              clearable
              :placeholder="$t('message.p-qxz')"
            >
              <el-option
                v-for="item in $store.state.regionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-model="$store.state.contractParams.province"
              v-if="$store.state.contractParams.border === 'within'"
              class="select-style"
              style="margin-right: 10px;"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="changProvince"
            >
              <el-option
                v-for="item in $store.state.provinceList"
                :key="item.code"
                :label="item.province"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="$store.state.contractParams.cityCode"
              v-if="$store.state.contractParams.border === 'within'"
              class="select-style"
              style="margin-right: 10px;"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="changeStoreParams({
                            cityCode: $event,
                        })"
            >
              <el-option
                v-for="item in $store.state.contractPage.subordinateProvinceList"
                :key="item.code"
                :label="item.province"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="$store.state.contractParams.impExpType"
              v-if="$store.state.contractParams.border === 'overseas'"
              class="select-style"
              style="margin-right: 10px;"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="changeStoreParams({
              impExpType: $event,
              })"
            >
              <el-option
                v-for="item in $store.state.tradeType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              filterable
              v-model="$store.state.contractParams.regionCode"
              v-if="$store.state.contractParams.border === 'overseas'"
              class="select-style"
              style="margin-right: 10px;"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="changeStoreParams({
              regionCode: $event,
              })"
            >
              <el-option
                v-for="item in $store.state.regionList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.zfqysd')+':'"
            label-width="220px"
            prop="attributionProvince"
            v-if="$store.state.contractParams.border === 'overseas'"
            style="margin:0 0 0 -10px;"
          >
            <el-select
              v-model="attributionProvince"
              class="select-style"
              style="margin-right: 10px;"
              clearable
              :placeholder="$t('message.p-qxz')"
              @change="attributionChangProvince"
            >
              <el-option
                v-for="item in provinceAllList"
                :key="item.code"
                :label="item.province"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label
            prop="attributionCityCode"
            v-if="$store.state.contractParams.border === 'overseas'"
          >
            <el-select
              v-model="attributionCityCode"
              class="select-style"
              style="margin-right: 10px;"
              clearable
        @change="attributionChangCity"
              :placeholder="$t('message.p-qxz')"
            >
              <el-option
                v-for="item in cityList"
                :key="item.code"
                :label="item.province"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
    </el-form>
    <div class="search-bnt">
      <el-button class="reset" type="primary" 
      clstag="pageclick|keycount|result_contract_manage|contract_manage_screen_click"
      @click="searchList">{{$t('message.cx')}}</el-button>
      <el-button @click="reset" class="reset">{{$t('message.cz')}}</el-button>
      <el-button
        @click="exportExcel"
        :disabled="flag"
        class="reset"
        v-show="$store.state.UserIn!=='enterprise'"
      >{{$t('message.export')}}</el-button>
    </div>
    <!--
        <div class="edit-bnt">
             <el-button type="primary" @click="editTable">新建统计表</el-button>
        </div>
    -->
    <!-- 表格 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      class="table"
      border
      style="width: 100%;margin: 20px 0;"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column
        :label="$t('message.xh')"
        :empty-text="$t('message.zwsj')"
        show-overflow-tooltip
        align="center"
        min-width="60"
      >
        <template scope="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="contractTitleCn"
        :label="$t('message.xymc')"
        :empty-text="$t('message.zwsj')"
        show-overflow-tooltip
        align="center"
        min-width="126"
      >
        <template slot-scope="scope">
          <span
            style="color: #238bc5; cursor: pointer;"
            type="text"
            @click="linkTo({ id: scope.row.id, stat: scope.row.auditClassification, },'contractdetails')"
          >{{scope.row.contractTitleCn}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="purchaser"
        :label="$t('message.cgs')"
        show-overflow-tooltip
        :empty-text="$t('message.zwsj')"
        align="center"
        min-width="90"
      >
        <template slot-scope="scope">
          <p v-for="item in JSON.parse(scope.row.client)" :key="item">
            <span v-if="item.type === '1'">{{item.value}}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        prop="supplier"
        :label="$t('message.gys')"
        show-overflow-tooltip
        :empty-text="$t('message.zwsj')"
        align="center"
        min-width="90"
      >
        <template slot-scope="scope">
          <p v-for="item in JSON.parse(scope.row.client)" :key="item">
            <span v-if="item.type === '2'">{{item.value}}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('message.jeWmy')"
        show-overflow-tooltip
        :empty-text="$t('message.zwsj')"
        align="center"
        min-width="80"
      >
        <template slot-scope="scope">
          <span>{{scope.row.usd}}</span>
        </template>
      </el-table-column>
      <!--
        <el-table-column
            prop="region"
            label="国家/地区"
            show-overflow-tooltip
            empty-text="暂无数据"
            align="center"
            min-width="90"
          >
             <template slot-scope="scope">
                <p>
                    <span v-if="scope.row.border === 'within'">{{(scope.row.province + '-' + scope.row.cityCode).replace(/-$/g, '')}}</span>
                    <span v-if="scope.row.border === 'overseas'">{{scope.row.region}}</span>
                </p>
            </template>
          </el-table-column>
      -->
      <el-table-column
        prop="contractTypeName"
        :label="$t('message.cglx')"
        show-overflow-tooltip
        :empty-text="$t('message.zwsj')"
        align="center"
        min-width="90"
      ></el-table-column>
      <el-table-column
        prop="submitTime"
        :label="$t('message.qysbsj')"
        show-overflow-tooltip
        :empty-text="$t('message.zwsj')"
        align="center"
        min-width="80"
      ></el-table-column>
      <el-table-column
        prop="approvalStatusCN"
        :label="$t('message.zt')"
        align="center"
        min-width="90"
      >
        <template slot-scope="scope">
          <p
            style="color: #238bc5; cursor: pointer"
            @click="checkReview(scope.row.id, scope.row.auditClassification)"
          >{{scope.row.approvalStatusCN}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="approvalTime"
        :label="$t('message.shsj')"
        show-overflow-tooltip
        :empty-text="$t('message.zwsj')"
        align="center"
        min-width="79"
      ></el-table-column>
      <el-table-column
        class="caozuo"
        :label="$t('message.caozuo')"
        fixed="right"
        align="center"
        min-width="150"
      >
        <template scope="scope">
          <el-button
            v-if="scope.row.operate && scope.row.operate.del"
            type="text"
            @click="del(scope.row.id)"
          >{{$t('message.sc')}}</el-button>
          <el-button
            v-if="scope.row.operate && scope.row.operate.edit"
            type="text"
            @click="editContract(scope.row.id,'edit')"
          >{{$t('message.bj')}}</el-button>
          <el-button
            v-if="scope.row.operate && scope.row.operate.track"
            type="text"
            @click="linkTo({ id: scope.row.id }, 'trackAdd')"
          >{{$t('message.czzz')}}</el-button>
          <el-button
            v-if="scope.row.operate && scope.row.operate.trackEdit"
            type="text"
            @click="linkTo({ id: scope.row.id }, 'trackAdd')"
          >{{$t('message.czbj')}}</el-button>
          <el-button
            v-if="scope.row.operate && scope.row.operate.approve"
            type="text"
            @click="linkTo({ id: scope.row.id }, 'review')"
          >{{$t('message.bnt-sh')}}</el-button>
          <el-button
            v-if="scope.row.operate && scope.row.operate.trackingApproval"
            type="text"
            @click="linkTo({ id: scope.row.id }, 'reviewTrack')"
          >{{$t('message.czsh')}}</el-button>
          <el-button
            type="text"
            class="conDetails"
            @click="linkTo({ id: scope.row.id, stat: scope.row.auditClassification, }, 'contractdetails')"
          >{{$t('message.cksbxq')}}</el-button>
          <el-button
            type="text"
            v-if="scope.row.operate && scope.row.operate.reApproval"
            @click="revoke(scope.row.id, scope.row.auditClassification)"
          >{{$t('message.qx')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="Pagiƒtion" style="text-align: right;margin-top: 10px;" v-show="count > 0">
      <div class="pagebox">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="count"
          :page-sizes="[5, 10, 20, 30, 40]"
          :page-size="$store.state.contractParams.pageSize || 10"
          :current-page="$store.state.contractParams.pageNo || 1"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :title="reviewModalTitle[showReview]" :visible.sync="showReview" width="800">
      <div v-if="showReview === '0'">
        <review-list :dataList="reviewDataList"></review-list>
      </div>
      <div v-if="showReview === '1'">
        <review-track-list :dataList="reviewTrackDataList"></review-track-list>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showReview = false">{{$t('message.gb')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixinPage from "@/mixins/elPaginationHandle";
import reviewList from "@components/reviewList.vue";
import reviewTrackList from "@components/reviewTrackList.vue";
import axios from "axios";
import buried from "@/utils/buried";
export default {
  data() {
    return {
      count: 0, // 数据总条数
      loading: false,
      flag: false,
      tableData: [],
      showReview: false, // 审核记录、追踪审核记录
      reviewModalTitle: [this.$t("message.shjl"), this.$t("message.zzshjl")],
      reviewDataList: [], // 审核记录
      provinceAllList: [],
      attributionProvince: "",
      attributionCityCode: "",
      cityList: [],
      reviewTrackDataList: [] // 追踪审核记录
    };
  },
  mixins: [mixinPage],
  mounted() {
    this.query({
      pageNo: 1
    });
    this.provinceAllList = this.$store.state.provinceAllList;
  this.attributionProvince = this.$store.state.contractParams.attributionProvince
  let attributionCityCode = this.$store.state.contractParams.attributionCityCode
  this.attributionChangProvince(this.attributionProvince)
  this.attributionChangCity(attributionCityCode)
   buried("result_contract_manage", "contract_manage_pv");
  },
  watch: {
    provinceAllList2: function(val) {
      this.provinceAllList = val;
    }
  },
  computed: {
    provinceAllList2() {
      return this.$store.state.provinceAllList;
    }
  },
  components: {
    reviewList,
    reviewTrackList
  },
  methods: {
    //境外选择省市
    attributionChangProvince(value) {
    const source = {
      attributionProvince: value,
      attributionCityCode: ""
    };
    this.$store.commit("changecontractParams", source);
      let indexTab;
      this.cityList = [];
      this.attributionCityCode = "";
      this.provinceAllList.forEach((item, index) => {
        if (item.code == value) {
          indexTab = index;
        }
      });
      if (
        this.provinceAllList[indexTab] &&
        this.provinceAllList[indexTab].subordinateProvinceList.length !== 0
      ) {
        this.provinceAllList[indexTab].subordinateProvinceList.forEach(item => {
          this.cityList.push(item);
        });
      }
    },
  attributionChangCity(value){
    const source = {
          attributionCityCode: value
        };
    this.attributionCityCode = value
    this.$store.commit("changecontractParams", source);
  },
    changProvince(evt) {
      const source = {
        province: evt,
        cityCode: ""
      };
      // 更新城市列表
      const list = {
        subordinateProvinceList:
          this.$store.state.provinceAllList.find(item => item.code === evt)
            .subordinateProvinceList || []
      };

      this.$store.commit("changecontractParams", source);
      this.$store.commit("changecontractPage", list);
    },
    changeService(params) {
      let source = {};
      let list = {};

      if (params.level === "serviceType1") {
        source = {
          serviceType1: params.value,
          serviceType2: "",
          serviceType3: ""
        };

        list = {
          serviceList2:
            (this.$store.state.serviceList.find(
              item => item.dictCode === params.value
            ) || {}).serviceList || [],
          serviceList3: []
        };
      } else if (params.level === "serviceType2") {
        source = {
          serviceType2: params.value,
          serviceType3: ""
        };
        list = {
          serviceList3:
            (this.$store.state.contractPage.serviceList2.find(
              item => item.dictCode === params.value
            ) || {}).serviceList || []
        };
      } else {
        source = {
          serviceType3: params.value
        };
      }

      this.$store.commit("changecontractParams", source);
      this.$store.commit("changecontractPage", list);
    },
    changeStat(evt) {
      this.changeStoreParams({
        contractStatus: evt,
        approvalStatus: ""
      });
    },
    // 改非params字段
    changeStorePage(params = {}) {
      this.$store.commit("changecontractPage", params);
    },
    // 统一更新params更新到store
    changeStoreParams(params = {}, key = "") {
      if (this.$store.state.contractParams.border === "within") {
        this.attributionCityCode = "";
        this.attributionProvince = "";
		this.$store.commit("changecontractParams", {
			  			 attributionCityCode:'',
			  			 attributionProvince:''
		})
      }
	  if(params.border==''){
	  		 this.attributionCityCode = "";
	  		 this.attributionProvince = ""; 
	  		 this.$store.commit("changecontractParams", {
	  			 attributionCityCode:'',
	  			 attributionProvince:''
	  		 })
	  }
      let source = {};
      // 有key说明是单改某一个值 - filtr
      if (key) {
        source = {
          [key]: params
        };
      } else {
        source = params;
      }

      this.$store.commit("changecontractParams", source);
    },
    // 校验
    validate(params) {
      let rst = true;
      let isAll = "";
      // const usdReg = /^\d+(\.\d\d?)?$/g

      if (params.startUsd) {
        isAll += "1";
        if (params.endUsd === "") {
          this.$message.error(this.$t("message.p-jezdzbnwk"));
          rst = false;
        }
        if (!/^\d+(\.\d\d?)?$/g.test(params.startUsd.trim())) {
          this.$message.error(this.$t("message.p-je1"));
          rst = false;
        }
      }

      if (params.endUsd) {
        isAll += "2";
        if (params.startUsd === "") {
          this.$message.error(this.$t("message.p-je2"));
          rst = false;
        }
        if (!/^\d+(\.\d\d?)?$/g.test(params.endUsd.trim())) {
          this.$message.error(this.$t("message.p-je1"));
          rst = false;
        }
      }

      if (isAll === "12" && +params.startUsd > +params.endUsd) {
        this.$message.error(this.$t("message.p-je3"));
        rst = false;
      }

      return rst;
    },
    query(params = {}) {
      this.changeStoreParams(params);
      const prepareParams = {
        ...this.$store.state.contractParams // store中的参数
      };
      // 将执行时间 格式处理
      if (prepareParams.executionDate && prepareParams.executionDate[1]) {
        prepareParams.executionStartDate = prepareParams.executionDate[0];
        prepareParams.executionEndDate = prepareParams.executionDate[1];
      }
      // 去除参数中的多余字段
      delete prepareParams.executionDate;

      // 校验
      if (!this.validate(prepareParams)) {
        return;
      }

      if (prepareParams.startUsd) {
        prepareParams.startUsd = +prepareParams.startUsd;
      }

      if (prepareParams.endUsd) {
        prepareParams.endUsd = +prepareParams.endUsd;
      }
      this.$axios
        .post("/api/contract/pageListContracts", {
          ...prepareParams,
          ...params
        })
        //成功返回
        .then(res => {
          console.log(res);
          if (res.code === 200) {
            // 表格数据
            this.tableData = res.data || [];
            this.count = res.count || 0;
          } else {
            // 失败
            this.$message.error(res.message);
          }
        })
        //失败返回
        .catch(error => {
          console.log(error);
        });
    },
    handleCurrentChange(evt) {
      this.query({
        pageNo: evt
      });
    },
    handleSizeChange(evt) {
      this.query({
        pageSize: evt
      });
    },
    exportExcel() {
      //导出excel
      this.flag = true;
      setTimeout(() => {
        this.flag = false;
      }, 3000);
      const prepareParam = {
        ...this.$store.state.contractParams // store中的参数
      };

      // 将执行时间 格式处理
      if (prepareParam.executionDate && prepareParam.executionDate[1]) {
        prepareParam.executionStartDate = prepareParam.executionDate[0];
        prepareParam.executionEndDate = prepareParam.executionDate[1];
      }
      // 去除参数中的多余字段
      delete prepareParam.executionDate;


      axios({
        method: "post",
        url: "/api/poi/exportContractListExcel", // 请求地址
        data: {
          ...prepareParam,
          attributionProvince: this.attributionProvince,
          attributionCityCode: this.attributionCityCode
        },
        responseType: "blob",
        observe: "response"
      })
        .then(res => {
          const tabA = document.createElement("a");
          let blob = new Blob([res], {
            type: "application/vnd.ms-excel"
          });
          tabA.setAttribute("href", window.URL.createObjectURL(blob));
          tabA.setAttribute("download", "合同协议数据统计.xlsx");
          document.body.appendChild(tabA);
          tabA.click();
          document.body.removeChild(tabA);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 撤销操作
    revoke(id, statType) {
      this.$confirm(this.$t("message.ts1"), this.$t("message.ts"), {
        confirmButtonText: this.$t("message.ture"),
        cancelButtonText: this.$t("message.false"),
        type: "warning"
      }).then(res => {
        // 审核通过 - 重新审核
        this.$axios
          .get("/api/releaseResult/revokeApproval", {
            params: {
              businessId: id,
              businessType: ["CONTRACT", "CONTRACT_TRACK"][statType]
            }
          })
          .then(res => {
            if (res.code === 200) {
              this.$message({
                message: this.$t("message.ts2"),
                type: "success"
              });
              this.query({
                pageNo: 1
              });
            } else {
              // 失败
              this.$message.error(res.message);
            }
          });
      });
    },
    // 操作项的跳转
    linkTo(query = {}, target) {
      this.$router.push({
        path: `/${target}`,
        query
      });
    },
    goPush() {
      this.$router.push("/achievementrelease");
    },
    editTable() {
      this.$router.push({
        path: "/contractstatistics",
        query: {
          state: "build"
        }
      });
    },
    reset() {
      this.attributionCityCode = "";
      this.attributionProvince = "";
      this.$store.commit("changecontractPage", {
        serviceList2: [], // 2级服务 与1级(行业类别)级联
        serviceList3: [] // 3级服务 与1、2级(行业类别)级联
      });
      // 重置
      this.$store.commit("changecontractParams", {
        approvalStatus: "", // 审核状态
    attributionProvince:'',
    attributionCityCode:'',
        contractStatus: "", // 状态一级
        contractId: "", // 合同/协议号
        border: "", // 境内外
        regionCode: "", // 国家
        province: "", // 省份
        cityCode: "", // 市区
        contractTitleCn: "", // 合同中文名称 或者 合同英文名称
        startUsd: "", // 起始美金
        endUsd: "", // 	结束美金
        executionDate: "",
        impExpType: "", // 进出口类型:0进口 1出口
        contractType: "", // 行业类别
        // industryType: '', // 行业类别
        serviceType1: "", // 服务类型一级
        serviceType2: "", // 服务类型二级
        serviceType3: "", // 服务类型三级
        purchaser: "", // 采购方
        supplier: "", // 供应商
        pageSize: 10, //
        pageNo: 1 //
      });
    },
    editContract(id, state) {
      this.$router.push({
        path: "/contractstatistics",
        query: {
          id: id,
          state: state
        }
      });
    },
    checkApproval(id) {
      this.$router.push({
        path: "/approval",
        query: {
          id: 1
        }
      });
    },
    track(id) {
      this.$router.push({
        path: "/contractfeedback",
        query: {
          id: 1
        }
      });
    },
    approval(id) {
      this.$router.push({
        path: "/approval",
        query: {
          id: 1
        }
      });
    },
    // 查看审核记录
    checkReview(id, statType) {
      let url = "";
      let rstKey = "";
      // 普通审核
      if (statType === "0") {
        url = "/api/contractApprovalLog/getAuditRecord";
        rstKey = "reviewDataList";
      } else if (statType === "1") {
        // 追踪审核
        url = "/api/contractTrack/getRecords";
        rstKey = "reviewTrackDataList";
      }

      this.$axios
        .get(url, {
          params: {
            id
          }
        })
        .then(res => {
          if (res.code === 200) {
            this.showReview = statType;
            // 表格数据
            this[rstKey] = res.data;
          } else {
            // 失败
            this.$message.error(res.message);
          }
        });
    },
    del(id) {
      //删除
      this.$confirm(this.$t("message.ts3"), this.$t("message.ts"), {
        confirmButtonText: this.$t("message.ture"),
        cancelButtonText: this.$t("message.false"),
        type: "warning"
      }).then(res => {
        this.$axios
          .get("/api/contract/deleteContract", {
            params: {
              id
            }
          })
          .then(res => {
            if (res.code === 200) {
              // 表格数据
              this.searchList();

              // 失败
              this.$message({
                message: this.$t("message.sccg"),
                type: "success"
              });
            } else {
              // 失败
              this.$message.error(res.message);
            }
          });
      });
    },
    trackApproval(id) {
      this.$router.push({
        path: "/trackapproval",
        query: {
          id: 1
        }
      });
    },
    searchList() {
      this.query({
        pageNo: 1
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  background: #fff;
  width: 100%;
  padding: 20px;
}

// .el-form-item {
//   width: 360px;
// }

.el-form-item {
  ::v-deep .el-form-item__label {
    text-align: right;
    min-width: 130px;
  }

  ::v-deep .el-select {
    // width: 208px;
  }

  ::v-deep .el-date-editor--datetimerange {
    width: 208px;
  }

  ::v-deep .el-input {
    width: 162px;
  }
}
.conDetails {
  margin-left: inherit;
}
.el-dialog__wrapper {
  ::v-deep .el-dialog__body {
    padding: 0 20px !important;
  }
}
.select-style {
  ::v-deep .el-input {
    width: 120px;
  }
}

.search-bnt {
  margin-top: 28px;
  text-align: center;
}

.reset {
  margin: 0 10px;
  width: 88px;
}

.edit-bnt {
  margin-top: 30px;
  text-align: right;
}

.el-col {
  width: auto;
  // margin:5px 10px 0 0px;
}

// .lang-item {
//   width: 550px !important;
// }

.table {
  ::v-deep .cell {
    white-space: inherit !important;
    word-break: inherit !important;
  }
}

.hack-width-auto {
  width: auto !important;
}
.hack-width-auto {
  ::v-deep .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
}
</style>
